<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            margin: 0;
        }
    </style>
</head>
<body>

<div id="root"></div>

<script>
    // 额，这里我没有按照题目要求输出，
    // 因为我觉得对于多层嵌套的数组 这样输出太丑了，
    // （毕竟只用<hr>分层，根本看不出层次好嘛！）
    // 于是我决定采用 缩进 的方法输出，方便展示数组的层次，
    // 其效果大致与下面的数组赋值相似：
    let myArray = [
        [
            "1.1",
            "1.2"
        ], [
            "2.1",
            "2.2",
            [
                "2.3.1",
                "2.3.2"
            ]
        ], [
            "3.1",
            [
                "3.2.1",
                [
                    "3.2.2.1",
                    [
                        "3.2.2.2.1"
                    ]
                ]
            ]
        ],
        4,
    ];
    printArray(myArray);

    // 输出数组
    function printArray(array) {
        addText("展开数组：[");
        unfoldArray(array);
        addText("]");
    }

    // 展开数组
    function unfoldArray(array, out = 1) {
        for (let i = 0; i < array.length; i++) {
            if (array[i] instanceof Array) {
                addText(`第${i + 1}个元素是数组：[`, out);
                unfoldArray(array[i], out + 1);
                addText("]", out)
            } else {
                addText(`第${i + 1}个元素：${array[i]}`, out)
            }
        }
    }

    // 添加文字
    function addText(innerText, i = 0) {
        let p = document.createElement("p");
        p.innerText = innerText;
        p.style = `padding-left: ${i * 25}px;`;
        document.getElementById("root").appendChild(p);
    }
</script>

</body>
</html>